<template>
  <div class="discounts">
    <p class="title">优惠活动</p>
    <div class="refresh-wrapper" v-show="isRefresh">
      <refresh></refresh>
    </div>
    <loading v-show="isLoading"></loading>
    <div class="content-wrapper" ref="content-wrapper">
      <div class="content">
        <div class="item" v-for="item in activityList" @click="_JMPiframeBox(item.name,item.actUrl)">
          <div class="item-image">
            <img :src="item.picUrl" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">{{item.name}}</div>
        </div>
        <endLine class="end-line" v-show="endFlag" :text="'我是有底线的'"></endLine>
      </div>
    </div>
  </div>
</template>

<script>
    import refresh from '../../../components/refresh/refresh'
    import endLine from '../../../components/endLine/endLine'
    import loading from '../../../components/loading/loading'
    import BScroll from 'better-scroll'
    import global from '../../../common/js/global'
    import {Toast} from 'mint-ui'
    export default {
        name: "discounts",
        data(){
          return{
            isRefresh:false,
            endFlag:false,
            offset:0,
            activityList:[],
            rows:10,
            isLoading:false
          }
        },
        components:{
          'refresh':refresh,
          'endLine':endLine,
          'loading':loading
        },
        created(){
          this._getDiscountsList()
        },
        methods:{
          _JMPiframeBox(name,url){
            this.$router.push({path:'/iframeBox',query:{name:encodeURI(name),url:encodeURI(url)}})
          },
          _getDiscountsList(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS'
                },
                url:global.$host+'/discountActList',
                data:{
                  rows:this.rows,
                  offset:this.offset
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.activityList = data.activityList
                  this.endFlag = data.endFlag
                  this.isLoading = false
                  // this.offset = data.offset
                }else {
                  Toast(res.data.error)
                }
              }else {

              }

            })
          }
        },
        mounted() {
          let _this = this
          this.$nextTick(()=>{
            if(!this.scroll){
              let scroll = new BScroll(this.$refs['content-wrapper'],{
                click:true,
                scrollY:true,
                pullUpLoad:{
                  threshold:-50
                },
                pullDownRefresh: {
                  threshold: 40,
                  stop: 30
                }

              })
              //下拉回弹刷新停留事件600ms
              scroll.on('pullingDown', () => {
                this.isRefresh = true
                setTimeout(()=>{
                  window.history.go(0)
                  scroll.finishPullDown();
                },600)
              });

              scroll.on('pullingUp',()=>{
                if(!_this.endFlag){
                  _this.rows+=10;
                  _this._getDiscountsList()
                }
                scroll.refresh()
                scroll.finishPullUp()

              })
            }else {
              this.scroll.refresh();
            }
          })
        }
    }
</script>

<style scoped lang="stylus">
  .discounts
    padding 15px 10px
    height 100%
    .title
      height 22px
      line-height 22px
      text-align center
      color #ffffff
      font-size 16px
    .refresh-wrapper
      position absolute
      width calc(100% - 20px)
      top 50px
      z-index 10000
    .content-wrapper
      overflow hidden
      height calc(100% - 22px)
      margin-top 10px
      .content
        padding-bottom 5px
        .end-line
          height 20px
          line-height 20px
          color #7e8c8d
          font-size 12px
        .item
          margin 10px 0 21px 0
          .item-image
            font-size 0
            border-radius 6px
            overflow hidden
            height 152px
            background url("bg_img_load.png")no-repeat center /100%
          .name
            color #ffffff
            text-align left
            font-size 16px
            height 22px
            line-height 22px
            margin-top 7px
</style>
